<template>
  <div>
    <div class="app-container">
      <el-table
        v-loading="loading"
        :data="tableData"
        :max-height="200"
        ref="scrollTableRef"
        @mouseenter="autoScroll(true)"
        @mouseleave="autoScroll(false)"
      >
        <el-table-column prop="date" label="日期" width="150"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '成功' ? 'success' : scope.row.status === '失败' ? 'danger' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'

// 定义响应式数据
const loading = ref(false)
const tableData = ref([])
const scrolltimer = ref(null)
const scrollTableRef = ref(null)

// 生成测试数据（增加数据量以便触发滚动）
const generateTestData = () => {
  const data = []
  const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十']
  const statuses = ['成功', '失败', '处理中']
  
  // 增加数据量到50条，确保能触发滚动
  for (let i = 1; i <= 50; i++) {
    const randomName = names[Math.floor(Math.random() * names.length)]
    const randomStatus = statuses[Math.floor(Math.random() * statuses.length)]
    
    data.push({
      date: `2023-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`,
      name: `${randomName}-${i}`,
      status: randomStatus
    })
  }
  
  return data
}

// 设置自动滚动
const autoScroll = (stop) => {
  // 清除之前的定时器
  if (scrolltimer.value) {
    window.clearInterval(scrolltimer.value)
    scrolltimer.value = null
  }
  
  const table = scrollTableRef.value
  if (!table) return
  
  // 确保能够获取到bodyWrapper
  const divData = table.$refs.bodyWrapper
  if (!divData) return
  
  if (stop) {
    // 停止滚动
    console.log('停止滚动')
  } else {
    // 开始滚动
    console.log('开始滚动')
    scrolltimer.value = window.setInterval(() => {
      // 检查元素是否存在
      if (!divData) {
        clearInterval(scrolltimer.value)
        return
      }
      
      // 元素自增距离顶部1像素
      divData.scrollTop += 1
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight - 1) {
        // 重置table距离顶部距离
        divData.scrollTop = 0
      }
    }, 100) // 滚动速度（可以适当调整）
  }
}

// 组件挂载时执行
onMounted(() => {
  // 模拟加载数据
  loading.value = true
  setTimeout(() => {
    tableData.value = generateTestData()
    loading.value = false
    
    // 确保DOM更新后再启动滚动
    nextTick(() => {
      // 延迟一小段时间确保表格渲染完成
      setTimeout(() => {
        autoScroll(false) // 明确传入false表示开始滚动
      }, 100)
    })
  }, 500)
})

// 组件卸载前执行
onBeforeUnmount(() => {
  autoScroll(true) // 停止滚动并清理定时器
})
</script>

<style scoped>
.app-container {
  padding: 20px;
  height: 100%;
  overflow: hidden;
}
</style>